<template>
    <div class="madp-data-subscription">
        <div class="madp-subscription-content">
            <div class="madp-display-one">
                <div class="madp-display">
                    <div class="madp-title"><el-image class="madp-star" src="/images/star.jpg" alt fit="contain"></el-image>客户数据:</div>
                    <div>
                        <p v-for="(item, index) in dataSubscription.customerDataList" :key="index + 111">
                            <el-checkbox class="madp-checkbox" v-model="item.checked">{{ item.name }}</el-checkbox>
                        </p>
                    </div>
                </div>
                <div class="madp-display">
                    <div class="madp-title"><el-image class="madp-star" src="/images/star.jpg" alt fit="contain"></el-image>客户群数据:</div>
                    <div>
                        <p v-for="(item, index) in dataSubscription.customerGroupData" :key="index + 222">
                            <el-checkbox class="madp-checkbox" v-model="item.checked">{{ item.name }}</el-checkbox>
                        </p>
                    </div>
                </div>
            </div>
            <div class="madp-display">
                <div class="madp-title"><el-image class="madp-star" src="/images/star.jpg" alt fit="contain"></el-image>推送数据:</div>
                <div>
                    <p v-for="(item, index) in dataSubscription.pushTime" :key="index">
                        <el-checkbox class="madp-checkbox" v-model="item.checked">{{ item.name }}</el-checkbox>
                    </p>
                </div>
            </div>
            <div class="madp-display-bottom">
                <div class="madp-title madp-receiving-name"><el-image class="madp-star" src="/images/star.jpg" alt fit="contain"></el-image>接收员工:</div>
                <div>
                    <div class="madp-flex">
                        <el-button plain icon="el-icon-edit" class="madp-add-staff" @click="addStaffFn">修改</el-button>
                        <div class="madp-btn" v-if="dataSubscription.userIds.length + dataSubscription.deptIds.length > 9">
                            <el-button type="text" icon="el-icon-arrow-down" v-if="showBtn" @click="showBtnFn">显示全部</el-button>
                            <el-button type="text" icon="el-icon-arrow-up" v-if="!showBtn" @click="showBtnFn">收起</el-button>
                        </div>
                    </div>
                    <div class="madp-display-more">
                        <div class="madp-msg-more">
                            <el-tag class="madp-receiving-employees" :key="index" v-for="(employees, index) in showTags" :disable-transitions="false">
                                <div class="madp-employees">
                                    <el-avatar class="madp-image" shape="square" :src="employees.url" icon="el-icon-user-solid"></el-avatar>
                                    <span>{{ employees.name }}</span>
                                </div>
                            </el-tag>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'dataSubscription',
    components: {},
    data() {
        return {
            showBtn: true, //true:展开 false收起
            dataSubscription: {
                switch: true, //订阅日报
                customerDataList: [
                    //客户数数据
                    {
                        name: '客户总数',
                        id: 'contactTotalContact',
                        checked: true,
                    },
                    {
                        name: '新增客户数',
                        id: 'contactChangeContact',
                        checked: true,
                    },
                    {
                        name: '流失客户数',
                        id: 'contactLossContact',
                        checked: true,
                    },
                    {
                        name: '净增客户数',
                        id: 'contactRealAddContact',
                        checked: true,
                    },
                ],
                customerGroupData: [
                    //客户群数据
                    { name: '客户群总数', id: 'totalRoom', checked: true },
                    { name: '新增客户群', id: 'changeRoom', checked: true },
                    {
                        name: '客户群客户总数',
                        id: 'totalContact',
                        checked: true,
                    },
                    {
                        name: '客户群新增客户数',
                        id: 'changeContact',
                        checked: true,
                    },
                    {
                        name: '客户群流失客户数',
                        id: 'lossContact',
                        checked: true,
                    },
                    {
                        name: '客户群净增客户数',
                        id: 'RealAddContact',
                        checked: true,
                    },
                ],
                pushTime: [
                    //推送时间
                    {
                        name: '每天 09:00-10:00 推送昨日数据',
                        id: 'daily',
                        checked: true,
                    },
                    {
                        name: '每周一 09:00-10:00 推送上周数据',
                        id: 'weekly',
                        checked: true,
                    },
                    {
                        name: '每月1号 09:00-10:00 推送上月数据',
                        id: 'monthly',
                        checked: true,
                    },
                ],
                userIds: [],
                deptIds: [],
            },
            showTags: [],
        };
    },
    props: {
        selectDataSubscription: {
            type: Object,
            default: () => {},
        },
    },
    watch: {
        selectDataSubscription: {
            handler(newValue) {
                this.dataSubscription.userIds = newValue.userIds;
                this.dataSubscription.deptIds = newValue.deptIds;
                this.showTags = [...this.dataSubscription.deptIds, ...this.dataSubscription.userIds];
                if (this.dataSubscription.userIds.length + this.dataSubscription.deptIds.length > 9) {
                    this.showBtn = true;
                    this.showTags = this.showTags.splice(0, 9);
                } else {
                    this.showBtn = false;
                }
            },
            deep: true,
            immediate: true,
        },
        showBtn: {
            handler(val) {
                let arr1 = this.dataSubscription.userIds || [];
                let arr2 = this.dataSubscription.deptIds || [];
                let arr = [...arr2, ...arr1];
                if (val) {
                    this.showTags = arr.splice(0, 9);
                } else {
                    this.showTags = arr;
                }
            },
        },
    },
    created() {
        this.selectDataSubscriptionFn();
    },
    mounted() {},
    methods: {
        showBtnFn() {
            this.showBtn = !this.showBtn;
        },
        addStaffFn() {
            this.$emit('addStaffFn', JSON.parse(JSON.stringify(this.dataSubscription)));
        },
        selectDataSubscriptionFn() {
            let { customerDataList, customerGroupData, pushTime, userIds, deptIds } = this.selectDataSubscription;
            // 客户数数据
            this.dataSubscription.customerDataList.map((item) => {
                let exit = customerDataList.indexOf(item.id);
                if (exit > -1) {
                    item.checked = true;
                } else {
                    item.checked = false;
                }
            });
            // 客户群数据
            this.dataSubscription.customerGroupData.map((item) => {
                let exit = customerGroupData.indexOf(item.id);
                if (exit > -1) {
                    item.checked = true;
                } else {
                    item.checked = false;
                }
            });

            // 推送时间
            this.dataSubscription.pushTime.map((item) => {
                let exit = pushTime.indexOf(item.id);
                if (exit > -1) {
                    item.checked = true;
                } else {
                    item.checked = false;
                }
            });
            // 员工
            this.dataSubscription.userIds = userIds;
            this.dataSubscription.deptIds = deptIds;
        },
    },
};
</script>

<style lang="scss" scoped>
.madp-subscription-switch {
    span:nth-child(1) {
        font-size: 16px;
        font-weight: bold;
        margin-right: 10px;
    }
    .madp-subscription-type {
        margin-left: 10px;
        color: rgba(0, 0, 0, 0.45);
    }
}
.madp-subscription-content {
    position: relative;
    padding: 24px;
    .madp-display-one {
        width: 70%;
        display: flex;
    }
    .madp-display {
        width: 80%;
        font-size: 15px;
        display: flex;
        margin-bottom: 20px;
        p {
            margin-bottom: 20px;
        }
    }
    .madp-display-bottom {
        font-size: 15px;
        display: flex;
        margin-bottom: 20px;
        p {
            margin-bottom: 20px;
        }
    }
    .madp-display-more {
        display: flex;
    }
    .madp-title {
        display: flex;
        align-items: flex-start;
        font-weight: bold;
        margin-right: 20px;
        min-width: fit-content;
    }
    .madp-employees {
        display: flex;
        align-items: center;
        margin-right: 12px;
        .madp-image {
            margin-right: 10px;
            width: 28px;
            height: 28px;
            border-radius: 4px;
        }
    }
    /deep/.el-tag--medium {
        position: relative;
        min-width: fit-content;
        height: 40px;
        line-height: 40px;
        color: #333;
        font-size: 15px;
    }
    /deep/ .el-icon-close {
        top: 12px;
        right: 5px;
        font-size: 15px;
        position: absolute;
    }
}
.madp-receiving-employees {
    margin: 0px 20px 20px 0px;
    width: 30%;
}
.madp-msg-more {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.madp-receiving-btn {
    display: flex;
}
.madp-flex {
    justify-content: space-between;
}
.madp-btn {
    /deep/ button {
        font-size: 16px;
    }
}
.madp-edit-btn {
    position: absolute;
    right: 0;
    top: 0px;
}
.madp-checkbox {
    margin-right: 10px !important;
}
.madp-add-staff {
    margin-bottom: 30px;
}
.madp-star {
    width: 18px;
    height: 18px;
}
</style>
